<template>
	<view class='list'>
		<Header></Header>
		<view class='list-main'>
			<view class='list-l'>
				<view 
					v-for='item in firstList' 
					:key='item.id'
				>
					{{ item.categoryName }}
				</view>
			</view>
			<view class='list-r'>
				<view class='r-img'>
					<image src="../../static/banner.d093dd6e.png" mode=""></image>
				</view>
				<view class='r-main'>
					<view 
						v-for='item in secondList' 
						:key='item.id'
						class='r-main-item'
					>	
						<image :src="item.thumbnail" mode=""></image>
						<text>{{ item.categoryName }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { getFirstCategorys ,getSecondCategorys } from '../../api/course.js'
export default{
	components:{
		Header
	},
	data () {
		return {
			firstList:[{
					categoryName:'全部'
			}],
			secondList:[]
		}
	},
	onLoad(){
		//获取一级数据
		getFirstCategorys().then(res=>{
			this.firstList = [...this.firstList,...res.list];
		})
		//获取二级数据
		getSecondCategorys({
			categoryId:-1
		}).then(res=>{
			this.secondList = res.list;
			console.log( res )
		})
	}
}
</script>

<style>
.list-main{
	display: flex;
	justify-content: space-between;
}
.list-l{
	width: 217rpx;
	line-height: 77rpx;
	font-size: 28rpx;
	color: #777777;
	text-align: center;
	background: rgba(247,249,255,0.39);
}
.list-r{
	flex:1;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.r-img{
	padding:0 34rpx;
}
.r-img image{
	width: 479rpx;;
	height: 192rpx;
	border-radius: 17rpx;
}
.r-main{
	display: flex;
	flex-wrap: wrap;
}
.r-main-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33.33333%;
	margin-top: 44rpx;
}
.r-main-item image{
	width: 83rpx;
	height: 83rpx;
}
.r-main-item text{
	font-size: 24rpx;
	color: #A9A9A9;
}
</style>